<template>
  <div class="goods-shop-info" v-if="isShow">
    <div class="shop-info-name">
      <img :src="shopdata.logo">
      <h3>{{shopdata.name}}</h3>
    </div>
    <div class="shop-info-main">
      <ul>
        <li class="sells">
          <span class="wan">{{shopdata.sells|toWan(2)}}</span>
          <span>总销量</span>
        </li>
        <li class="goodsCount">
          <span class="count">{{shopdata.goodsCount}}</span>
          <span>全部宝贝</span>
        </li>
        <li class="goods-score">
          <div v-for="(item, index) in shopdata.score" :key="index" class="goods-score-item">
            <span class="name">{{item.name}}</span>
            <span :class="{isbetter:item.isBetter,score:true}" >{{item.score}}</span>
            <span :class="{isbgc:item.isBetter,better:true}">{{item.isBetter|toGaoDi}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopdata: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  name: "GoodsShopInfo",
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {
    isShow() {
      return Object.keys(this.shopdata).length != 0;
    }
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.shopdata);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.goods-shop-info {
  margin: 0 10px;
  .shop-info-name {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
    h3 {
      padding-left: 10px;
      font-size: 20px;
      font-weight: 400;
    }
  }
  .shop-info-main {
    ul {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-around;
      .sells {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .wan {
          padding-bottom: 8px;
          font-size: 20px;
        }
      }
      .goodsCount {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .count {
          padding-bottom: 8px;
          font-size: 20px;
        }
        border-right: 1px solid #ccc;
      }
      .goods-score {
        flex: 1;
        padding-left: 30px;
        .goods-score-item {
          display: flex;
          justify-content: space-between;

          &:nth-child(2) {
            margin: 8px 0;
          }
          .score {
            // padding: 0 8px;
            color: green;
          }
          .better{color:#fff;background: green}
        }
      }
    }
  }
}
.isbetter{ color: red!important;}
.isbgc{background:red!important }
</style>